<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
			
			@media screen and (max-width:2000px) {
				#main {
				   width:95vw;height:80vh;position: absolute;top:18vh;left:3vw
				 }	
			}
			@media screen and (max-width:1680px) {
				#main {
				   width:80vw;height:80vh;position: absolute;top:18vh;left:3vw
				}		
			}
			@media screen and (max-width:1600px) {
			}
			@media screen and (max-width:1440px) {
				#main {
				   width:70vw;height:80vh;position: absolute;top:15vh;left:15vw
				}	
			}
			@media screen and (max-width:1400px) {
				#main {
				   width:85vw;height:90vh;position: absolute;top:9vh;left:12vw
				}		
			}
			@media screen and (max-width:1366px) {
				#main {
				   width:90vw;height:80vh;position: absolute;top:18vh;left:12vw
				}			
			}
			@media screen and (max-width:1360px) { 
				#main {
				   width:95vw;height:80vh;position: absolute;top:18vh;left:3vw
				 }		
			}
			#main {
			   width:100vw;height:90vh;position: absolute;top:16vh;left:-1vw
			 }	
        </style>
	  <body>
        <div id='main'></div>
		<script src='lib/esl.js'></script>
		<script src='lib/config.js'></script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0ro0PcGOWxtHpIp3D93c5LwROGfuxEBj"></script> -->
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js">
			
		</script>
        <script>
            //返回随机颜色
         function getColor() {
         			var colors = ['#fd6f1b','#fd6f1b','#fd6f1b','#fd6f1b'];
         			var index = Math.floor((Math.random() * colors.length)); 
         			return colors[index];
         		}
                 $.ajax({
         			async : true, //同步执行/MetisManage/dataAuth/findDeviceLonlat
         			url: "http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceLonlat",
         			success: function (res) {
						// console.log(res)
         				var rdata=res.records;
         				// console.log(rdata)
         				var data = new Array();
         				for (var i = 0; i < rdata.length; i++) {
         					var lonlat = rdata[i].lonlat;
         					var lonlatArray = lonlat.split(",");
         					var lon = lonlatArray[0];
         					var lat = lonlatArray[1];
         					var map = {
         						'latitude':lat,
         						'longitude':lon
         					}
         					data.push(map);
         			    }
         		require([
         				'echarts'
         			], function (echarts) {
         				$.get('../map/json/world.json', function (worldJson) {
         					echarts.registerMap('world', worldJson);
         					var latlong = data;
         					// console.log(typeof(latlong))
         					var chart = echarts.init(document.getElementById('main'), null, {
         					});
         					var max = -Infinity;
         					var min = Infinity;
         					chart.setOption({
         						title : {
         							x:'center',
         							y:'top'
         						},
         						tooltip : {
         							trigger: 'item',
									show:true,
         							formatter : function (params) {
										// if(params)
										// console.log(params)
										var relVal = params.data.value
         								return relVal;//鼠标滑过的时候显示的数据经纬度
         							},
									
         						},
         						visualMap: {
         							show: false,
         							min: 0,
         							max: max,
         							inRange: {
         							symbolSize: [4, 4]
         							}
         						},
         						geo: {
         							name: '',
         							//类型
         							type: 'map',
         							//地图
         							map: 'world',
         							roam: true,
         							z:1,
         							//图形上的文本标签,这里不显示
         							label: {
         								emphasis: {
         									  show: false//高亮时不显示地图的上的名字.
         								}
         							},
         							//地图区域的多边形 图形样式 
         							itemStyle: {
         							   //普通状态
         								normal: {
         									areaColor: '#04041c',//区域处的颜色
         									borderColor: '#3488b7',//地图边的颜色
											borderWidth: 1.2
         									// borderWidth: 1.5
         								},
         								//高亮状态
         								emphasis: {
         									color: 'rgba(0,191,255, 0.2)'
         								}
         							}
         						},
         						series : [
         							{
         								type: 'effectScatter',
         								coordinateSystem: 'geo',
         								//可以容纳的动画数量
         								animationThreshold:50000,
         								//是否启用图例 hover 时的联动高亮。
         								legendHoverLink:true,
         								//特效类型，目前只支持涟漪特效'ripple'
         								// effectType:'ripple',
         								//配置何时显示特效，render表示渲染完就显示
         								// showEffectOn:'render',
         								//涟漪特效相关配置，period:动画的时间，scale：动画中波纹的最大缩放比例，brushType：波纹的绘制方式，可选 'stroke' 和 'fill'
         								// rippleEffect:{'period':5, 'scale':3, 'brushType':'stroke'},
         								symbolSize:[4,4],
         								// symbolRotate :1,
         								data: latlong.map(function (itemOpt) {
         									return {
         										value: [
         											itemOpt.longitude,
         											itemOpt.latitude
         										],
         			
         										label: {
         											emphasis: {
         												show: false//鼠标滑过的时候显示的纬度
         											},
													  normal: {
														show: false//默认显示在上面的数字
													},
         										},
         										itemStyle: {
         											normal: {
         												//color: getColor(),
         												// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
         												color: {
         													type: 'radial',
         													x: 2,
         													y: 2,
         													r: 1,
         													colorStops: [{
         														offset: 0, color: getColor() // 0% 处的颜色
         													}, {
         														offset: 1, color: getColor() // 100% 处的颜色
         													}],
         													globalCoord: false // 缺省为 false
         												}
         											}
         										},
         									};
         								})                          
         							}
         						]
         					});
         				});
         			});
         		    }
         		});	
        </script>
    </body>
</html>